<template>
    <div class="category" @click="toAlgorithms">
        <div class="imgDiv">
            <img class="categoryImg" :src="imgUrl" alt="无"/>
        </div>
        <div class="categoryDiv">{{categoryName}}</div>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props: {
            imgUrl: "",
            categoryName: ""
        },
        data() {
            return {}
        },
        methods: {
            toAlgorithms(){
                console.log(1)
                this.$router.push('/algorithm')
            }
        },
        created() {
        },
        mounted() {
        }
    }
</script>

<style scoped lang="scss">
    .categoryImg {
        width: 144px;
        height: 192px;
    }

    .category {
        float: left;
        cursor: pointer;
        margin-right: 160px;
    }

    .category:nth-of-type(4n){
        margin-right: 0;
    }

    .imgDiv{
        margin-top: 30px;
    }

    .categoryImg{
        border-radius: 10px;
    }

    .categoryImg:hover {
        box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
        transform: translateY(-5px);
        transition: 0.5s;
    }

    .categoryDiv{
        font-size: 16px;
        line-height: 24px;
        color: rgba(var(--grey-8-rgb), 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 144px;
        margin-top: 12px;
    }
</style>
